<!--  -->
<template>
  <div class="user-container">
    <div class="header">
      <div class="left-el">
        <span class="title">用户管理</span>
      </div>
      <div class="right-el">
        <div class="form-item">
          <span>用户类型：</span>
          <el-select size="small" v-model="type" placeholder="请选择">
            <el-option :key="-1" label="所有" value=""></el-option>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="form-item">
          <span>用户名：</span>
          <el-input size="small" v-model="userName" placeholder="请输入内容"></el-input>
        </div>
        <div class="form-item">
          <el-button size="small" type="primary" @click="init">搜索</el-button>
        </div>
        <div class="form-item">
          <el-button size="small" type="primary" @click="openDialog('')">创建</el-button>
        </div>
      </div>
    </div>

    <div class="user-body">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="userName" label="用户名" align="center">
        </el-table-column>
        <el-table-column prop="account" label="账号" align="center">
        </el-table-column>
        <el-table-column prop="type" label="类型" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.type | typeName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button style="color: #f56c6c !important;" type="text"
              @click="openDeleteDialog(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block-pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
          :page-sizes="[2, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <el-dialog :title="dialogTitle" width='400px' :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="ruleForm" size="small" :model="form">
        <el-form-item label="用户名：" prop="userName" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="请输入用户名" v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="账号：" prop="account" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="请输入账号" v-model="form.account"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="请输入密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="用户类型：" prop="type" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="提示" :visible.sync="deleteDialogVisible" width="30%">
      <span>是否确认删除该用户？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { MessageBox, Message } from 'element-ui'
import { getUsers, createUser, updateUser, deleteUser } from '@/api/user';
import moment from 'moment';
export default {
  name: "User",
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      type: '',
      userName: '',
      tableData: [],
      total: 0,
      options: [{
        value: 0,
        label: '租户'
      }, {
        value: 1,
        label: '评估师'
      }],
      form: {
        userName: '',
        account: '',
        password: '',
        type: 0
      },
      dialogTitle: '创建用户',
      dialogFormVisible: false,
      formLabelWidth: '120px',
      deleteDialogVisible: false,
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, message: '密码必须在5个字符以上', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'blur' }
        ],
      }
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    getList() {
      const { pageNum, pageSize, type, userName } = this
      getUsers({ pageNum, pageSize, type, userName }).then(res => {
        console.log(res);
        this.tableData = res.data.items
        this.total = res.data.total
      })
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {

      this.pageNum = val
      this.getList()
    },

    init() {
      this.pageNum = 1
      this.pageSize = 10
      this.getList()
    },

    handleEdit(index, row) {
      this.openDialog(row)
    },
    openDeleteDialog(index, row) {
      this.form = row
      this.deleteDialogVisible = true
    },
    openDialog(row) {
      if (row) {
        this.dialogTitle = '修改用户'
        this.form = JSON.parse(JSON.stringify(row))
        this.form.password = ''
      } else {
        this.dialogTitle = '创建用户'
        this.form = {
          userName: '',
          account: '',
          password: '',
          type: 1
        }
      }

      this.dialogFormVisible = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            updateUser(this.form).then(res => {
              console.log(res);
              Message({
                message: "修改成功",
                type: 'success',
                duration: 5 * 1000
              })
              this.getList()
              this.dialogFormVisible = false
            })
          } else {
            createUser(this.form).then(res => {
              console.log(res);
              Message({
                message: "创建成功",
                type: 'success',
                duration: 5 * 1000
              })
              this.getList()
              this.dialogFormVisible = false
            })
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    handleDelete() {
      deleteUser(this.form).then(res => {
        console.log(res);
        Message({
          message: "删除成功",
          type: 'success',
          duration: 5 * 1000
        })
        this.getList()
        this.deleteDialogVisible = false
      })
    }
  },
  filters: {
    typeName(type) {
      return type == 0 ? '租户' : '评估师'
    },
    dateFormat(date) {
      return moment().format('YYYY-MM-DD HH:mm')
    }
  }
}
</script>

<style lang='scss' scoped>
.user {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .left-el {
    .title {
      font-size: 22px;
      font-weight: bold;
    }
  }

  .right-el {
    display: flex;
    align-items: center;

    .form-item {
      display: flex;
      align-items: center;
      font-size: 14px;
      margin-left: 10px;

      span {
        flex-shrink: 0;
        color: #333;
        font-weight: bold;
      }
    }
  }
}

.user-body {
  .block-pagination {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
